%header.gl-flex.gl-flex-wrap.gl-items-center.gl-justify-between.gl-gap-y-3.gl-my-5{ @options }
  .gl-flex.gl-flex-wrap.gl-justify-between.gl-gap-x-5.gl-gap-y-3.gl-w-full{ class: '@md/panel:gl-flex-nowrap' }
    %h1.gl-heading-1{ class: '!gl-m-0', data: { testid: 'page-heading' } }
      = heading || @heading

    - if actions?
      .page-heading-actions.gl-self-start.gl-flex.gl-flex-wrap.gl-items-center.gl-gap-3.gl-w-full.gl-shrink-0{ class: "@sm/panel:gl-w-auto @md/panel:gl-mt-1 @lg/panel:gl-mt-2", data: { testid: 'page-heading-actions' } }
        = actions

  - if description? || @description
    .gl-w-full.gl-text-subtle{ data: { testid: 'page-heading-description' } }
      = description || @description
